<template>
    <div class="app-container">
        <h2 align="center">采购计划单</h2>
        <el-row :gutter="10" class="mb8">
            <el-col>
                <el-button
                  icon="el-icon-plus"
                  plain
                  size="mini"
                  type="primary"
                  @click="handleAdd">新增</el-button>
            </el-col>
        </el-row>
        <el-tooltip placement="top">
        <div slot="content">点击任意一行列，即可在下方查看采购单明细记录</div>
        <el-table :data="CGJHDData" v-loading="loading" @row-click="showTab">
            <el-table-column label="计划单号" prop="JHDH"/>
            <el-table-column label="需求开始日期" prop="XQKSRQ"/>
            <el-table-column label="需求结束日期" prop="XQJSRQ"/>
            <el-table-column
                              align="center"
                              class-name="small-padding fixed-width"
                              fixed="right"
                              label="操作"
                              min-width="60">
                              <template slot-scope="scope">
                                <el-button
                                  icon="el-icon-edit"
                                  size="mini"
                                  type="text"
                                  @click="handleUpdate(scope.row)"
                                  >修改</el-button>
                                  <el-button
                                    icon="el-icon-delete"
                                    size="mini"
                                    type="text"
                                    @click="handleDelete(scope.row)"
                                    >删除</el-button>
                              </template>
                            </el-table-column>
        </el-table>
    </el-tooltip>

    <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" />


      <!-- 添加或修改采购计划单对话框 -->
       <el-dialog
         :title="title"
         :visible.sync="open"
         append-to-body="append-to-body"
         width="1024px"
         >
          <el-form
            :model="CGJHDDialog"
            label-width="120px"
          >
           <el-row>
            <el-col :span="16">
                <el-form-item label="计划单号" prop="JHDH">
                    <el-input v-model="CGJHDDialog.JHDH" placeholder="请输入计划单号"></el-input>
                </el-form-item>
            </el-col>
           </el-row>  
           <el-row>
            <el-col :span="12">
                <el-form-item label="需求开始日期" prop="XQKSRQ">
                    <el-date-picker type="date" placeholder="请选择需求开始日期" v-model="CGJHDDialog.XQKSRQ"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="需求结束日期" prop="XQJSRQ">
                    <el-date-picker type="date" placeholder="请选择需求结束日期" v-model="CGJHDDialog.XQJSRQ"></el-date-picker>
                </el-form-item>
            </el-col>
           </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
        </el-dialog>

      <el-tabs v-model="activeName" v-if="showCard">
        <el-tab-pane label="采购单明细" name="first">
            <h2 align="center">{{ JHDH }}采购单明细</h2>
            <!-- <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              icon="el-icon-plus"
              plain
              size="mini"
              type="primary"
              @click="handleAddMX">新增明细</el-button>
          </el-col>
          </el-row> -->
            <el-table :data="purchasePlanBillData">
                <el-table-column label="物品代号" prop="WPDH"/>
                <el-table-column label="物品名称" prop="WPMC"/>
                <el-table-column label="规格" prop="GG"/>
                <el-table-column label="单位" prop="DW"/>
                <el-table-column label="颜色" prop="YS"/>
                <el-table-column label="属性" prop="SX"/>
                <el-table-column label="计划数量" prop="JHSL"/>
                <el-table-column label="需求日期" prop="XQRQ"/>
                <el-table-column label="有效期" prop="YXQ"/>
                <el-table-column label="单价" prop="DJ"/>
                <el-table-column label="金额" prop="JE"/>
                <el-table-column label="供应商代号" prop="GYSDH"/>
                <el-table-column label="供应商名称" prop="GYSMC"/>
                <el-table-column label="备注" prop="remark"/>
                <el-table-column label="采购订单号" prop="CGDDH"/>
                <el-table-column label="单重" prop="DC"/>
                
            </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return{
            //弹出层标题
            title:"",
            //是否显示弹出层
            open:false,
            //表单参数
            CGJHDDialog: {},
            showCard:true,
            JHDH:'',
            activeName: 'first',
            purchasePlanBillData: [{
                WPDH:'10086',
                WPMC:'光粉',
                GG:'0*0*0',
                DW:'kg',
                YS:'',
                SX:'',
                JHSL:'1314529',
                XQRQ:'2024-1-1',
                YXQ:'2024-4-4',
            },{
                WPDH:'10086',
                WPMC:'光粉',
                GG:'0*0*0',
                DW:'kg',
                YS:'',
                SX:'',
                JHSL:'1314529',
                XQRQ:'2024-1-1',
                YXQ:'2024-4-4',
            },{
                WPDH:'10086',
                WPMC:'光粉',
                GG:'0*0*0',
                DW:'kg',
                YS:'',
                SX:'',
                JHSL:'1314529',
                XQRQ:'2024-1-1',
                YXQ:'2024-4-4',
            }],
            CGJHDData: [{
                JHDH:'1234556',
                XQKSRQ:'2024-12-11',
                XQJSRQ:'2024-12-14',
            },{
                JHDH:'12345567',
                XQKSRQ:'2024-12-11',
                XQJSRQ:'2024-12-14',
            },{
                JHDH:'123455678',
                XQKSRQ:'2024-12-11',
                XQJSRQ:'2024-12-14',
            },{
                JHDH:'1234556789',
                XQKSRQ:'2024-12-11',
                XQJSRQ:'2024-12-14',
            }],
            total: 1,
            loading: false,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            }
        }
    },
    methods: {
      showTab(row) {
            this.JHDH = row.JHDH;
            
            this.showCard = true;
            },
            //新增按钮操作
            handleAdd() {
                this.open = true;
                this.title = "添加采购计划单";
                this.CGJHDDialog.JHDH = '';
            },
            //修改按钮操作
            handleUpdate(row) {
                this.open = true;
                this.title = "修改采购计划单";
                this.CGJHDDialog.JHDH = row.JHDH;
            },
            //取消按钮
            cancel() {
                this.open = false;
            },
            //提交按钮
            submitForm() {
                this.open = false;
            }
    }
}

</script>
